<html>

<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="author" content="CSS5, css5.com.cn">
    <link rel="stylesheet" href="./link/vital.css">
    <link rel="stylesheet" href="./link/mdui.css">
    <script src="./link/zepto.min.js"></script>

</head>

<body class="layouts layouts_index">
    <div class="row header">
        <div class="section">
            <nav class="mdui-p-l-2">
                <h2 style="line-height: 4.5rem;">CongXin IoT
                </h2>
            </nav>
        </div>
    </div>


    <div class="row">
        <div class="section full-width-forms">
            <h3 class="center">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">STATUS</font>
                </font>
            </h3>
            <div class="box bg-white no-first-last">
                <p>
                <table>
                    <tbody>
                        <tr>
                            <td id="wifi-hostname"></td>
                        </tr>
                        <tr>
                            <td id="wifi-status"></td>
                        </tr>
                        <tr>
                            <td id="wifi-local-ip"></td>
                        </tr>
                        <tr>
                            <td id="wifi-mdns"></td>
                        </tr>
                        <tr>
                            <td id="heap-free"></td>
                        </tr>
                    </tbody>
                </table>
                </p>
                <p><a id="btn-restart" href="#" class="btn red solid">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">RESTART</font>
                        </font>
                    </a></p>
            </div>
        </div>
    </div>

    <div class="page bg">
        <div class="row">
            <div class="section full-width-forms">
                <div class="autogrid">
                    <hr>
                    <div class="col-1-4 space"></div>
                    <div class="col-1-2">
                        <h3 class="center">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">SYSTEM CONFIG</font>
                            </font>
                        </h3>
                        <div class="box bg-white no-first-last">
                            <p><label><small>
                                <font style="vertical-align: inherit;">
                                    <font style="vertical-align: inherit;">Admin Password</font>
                                </font>
                            </small></label><input id="admin-password" placeholder="Admin Password" type="text"></p>

                            <p><label><small>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">Bemfa Token</font>
                                        </font>
                                    </small></label><input id="bemfa-token" placeholder="Bemfa Token" type="text"></p>
                            <div id="bemfa-topics"></div>
                            <p><a id="btn-save-bemfa" href="#" class="btn red solid">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">SAVE</font>
                                    </font>
                                </a></p>
                        </div>
                    </div>
                    <div class="col-1-4 space"></div>
                    <div class="clear"></div>
                </div>
            </div>

        </div>
    </div>

    <div class="page bg">
        <div class="row">
            <div class="section full-width-forms">
                <div class="autogrid">
                    <hr>
                    <div class="col-1-4 space"></div>
                    <div class="col-1-2">
                        <h3 class="center">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">WIFI CONFIG</font>
                            </font>
                        </h3>
                        <div class="box bg-white no-first-last">
                            <p><label><small>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">SSID</font>
                                        </font>
                                    </small></label><input id="ssid" placeholder="" type="text"></p>
                            <p><label><small>
                                        <font style="vertical-align: inherit;">
                                            <font style="vertical-align: inherit;">PASSWORD</font>
                                        </font>
                                    </small></label><input id="password" placeholder="" type="text"></p>
                            <p><a id="btn-save" href="#" class="btn red solid">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">SAVE</font>
                                    </font>
                                </a></p>
                        </div>
                    </div>
                    <div class="col-1-4 space"></div>
                    <div class="clear"></div>
                </div>
            </div>

        </div>
    </div>


    <div class="row">
        <div class="section full-width-forms">
            <hr>
            <h3 class="center">
                <font style="vertical-align: inherit;">
                    <font style="vertical-align: inherit;">FIRMWARE</font>
                </font>
            </h3>
            <div class="box bg-white no-first-last">
                <p><label><small>
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">Firmware URL</font>
                            </font>
                        </small></label><input id="firmware-url" placeholder="" type="text"></p>
                <p><a href="#" class="btn red solid">
                        <font style="vertical-align: inherit;">
                            <font style="vertical-align: inherit;">UPGRAGE</font>
                        </font>
                    </a></p>
            </div>
        </div>
    </div>


    <div class="row footer center">
        <div class="section">
            <hr>
            <p>by 蓝蓝 © 2021</p>
        </div>
    </div>

    <script type="text/javascript">
        var token = localStorage.getItem("token");

        $(document).ready(function () {
            console.log(token)
            if (token == null) {

                setTimeout(function () {
                    window.location.href = "index.html"
                }, 100);

            } else {
                get_status();
            }
        });

        $('#btn-restart').on('click', function () {
            system_restart();
        });

        $('#btn-save-bemfa').on('click', function () {
            save_system_info($('#bemfa-token').val(),$('#admin-password').val());
        });

        $('#btn-save').on('click', function () {
            save_wifi($('#ssid').val(), $('#password').val());
        });

        $('#btn-update').on('click', function () {
            system_update($('#firmware-url').val());
        });


        function save_system_info(_token,_password) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'token': token },
                url: '/api/savesystem',
                data: {
                    token: _token,
                    password:_password
                },
                success: function (data) {
                    if (data.code == 0) {
                        alert(data.msg)
                    } else {
                        alert("保存失败")
                    }

                },
                error: function (xhr, textStatus) {
                    //mdui.alert('异常错误，请刷新重新');
                    setTimeout(function () {
                        window.location.href = "index.html"
                    }, 100);
                }
            });

        }

        function save_wifi(_ssid, _password) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'token': token },
                url: '/api/savewifi',
                data: {
                    ssid: _ssid,
                    password: _password
                },
                success: function (data) {
                    if (data.code == 0) {
                        alert(data.msg)
                    } else {
                        setTimeout(function () {
                            window.location.href = "index.html"
                        }, 100);
                    }

                },
                error: function (xhr, textStatus) {
                    //mdui.alert('异常错误，请刷新重新');
                    setTimeout(function () {
                        window.location.href = "index.html"
                    }, 100);
                }
            });
        }

        function get_status() {
            $.ajax({
                method: 'get',
                dataType: 'json',
                headers: { 'Content-Type': 'application/json;charset=utf8', 'token': token },
                url: '/api/status',
                success: function (data) {
                    let topic_html = '';
                    
                    $.each(data.bemfa.topic, function (i, topic) {
                        console.log('topic:',topic)
                        topic_html += '<p><label><small>'
                            + '   <font style="vertical-align: inherit;">'
                            + '                <font style="vertical-align: inherit;">Topic (Read only)</font>'
                            + '            </font>'
                            + '        </small></label><input value="'+topic+'" placeholder="" type="text">'
                            + '</p>';
                    });
                    $('#bemfa-topics').html(topic_html);
                    $('#bemfa-token').val(data.bemfa.token);
                    $('#admin-password').val(data.password);
                    $('#ssid').val(data.wifi.ssid);
                    $('#wifi-hostname').text("hostname:" + data.wifi.hostname);
                    $('#wifi-status').text("connect:" + data.wifi.isConnected);
                    $('#wifi-local-ip').text("local IP:" + data.wifi.localIp);
                    $('#wifi-mdns').text("mDNS:" + data.mdns.isRunning);
                    $('#heap-free').text("heap free:" + data.heap.free);

                },
                error: function (xhr, textStatus) {
                    //mdui.alert('异常错误，请刷新重新');

                }
            });
        }

        function system_restart() {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/api/restart',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'token': token },
                data: {
                },
                success: function (data) {
                    if (data.code == 0) {
                        alert(data.msg)
                    } else {
                        setTimeout(function () {
                            window.location.href = "index.html"
                        }, 100);
                    }

                },
                error: function (xhr, textStatus) {
                    //mdui.alert('异常错误，请刷新重新');
                    setTimeout(function () {
                        window.location.href = "index.html"
                    }, 100);
                }
            });
        }

        function system_update(_binUrl) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/api/update',
                headers: { 'Content-Type': 'application/json;charset=utf8', 'token': token },
                data: {
                    "binUrl": _binUrl
                },
                success: function (data) {
                    setTimeout(function () {
                        window.location.href = "index.html"
                    }, 1000);

                },
                error: function (xhr, textStatus) {
                    //mdui.alert('异常错误，请刷新重新');

                }
            });
        }

    </script>

</body>

</html>